<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜品管理 - 厨房管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 新拟物化风格 */
        .neumorphic {
            background: #f0f0f3;
            box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
        }
        
        .neumorphic-inset {
            background: #f0f0f3;
            box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
        }
        
        .neumorphic-btn {
            background: #f0f0f3;
            box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
            transition: all 0.3s ease;
        }
        
        .neumorphic-btn:hover {
            box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
        }
        
        .neumorphic-card {
            background: #f0f0f3;
            box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;
            transition: all 0.3s ease;
        }
        
        /* iPhone 16 Pro 样式 */
        .iphone-container {
            width: 390px;
            height: 844px;
            border-radius: 55px;
            overflow: hidden;
            position: relative;
            background: #000;
            padding: 10px;
        }
        
        .iphone-screen {
            width: 100%;
            height: 100%;
            border-radius: 45px;
            overflow: hidden;
            background: #f0f0f3;
            position: relative;
        }
        
        /* 状态栏样式 */
        .status-bar {
            height: 44px;
            background: #f0f0f3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px;
            font-size: 14px;
            font-weight: 600;
        }
        
        /* 动态岛 */
        .dynamic-island {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 126px;
            height: 37px;
            background: #000;
            border-radius: 20px;
            z-index: 10;
        }
        
        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f0f0f3;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #d1d1d1;
            border-radius: 2px;
        }
        
        /* 难度星级 */
        .star-rating {
            color: #fbbf24;
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="iphone-container">
        <div class="iphone-screen">
            <!-- 动态岛 -->
            <div class="dynamic-island"></div>
            
            <!-- 状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex gap-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
            
            <!-- 顶部导航 -->
            <div class="px-6 py-4 flex items-center justify-between">
                <i class="fas fa-arrow-left text-xl text-gray-700 cursor-pointer" onclick="window.history.back()"></i>
                <h2 class="text-xl font-bold text-gray-800">菜品管理</h2>
                <div class="w-6"></div>
            </div>
            
            <!-- 搜索栏 -->
            <div class="px-6 mb-4">
                <div class="neumorphic-inset rounded-2xl px-4 py-3 flex items-center gap-3">
                    <i class="fas fa-search text-gray-400"></i>
                    <input type="text" placeholder="搜索菜品..." class="bg-transparent outline-none flex-1 text-gray-700">
                </div>
            </div>
            
            <!-- 分类标签 -->
            <div class="px-6 mb-4">
                <div class="flex gap-3 overflow-x-auto">
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-purple-600 font-medium">全部</span>
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-gray-600">家常菜</span>
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-gray-600">汤羹</span>
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-gray-600">主食</span>
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-gray-600">西餐</span>
                </div>
            </div>
            
            <!-- 菜品列表 -->
            <div class="px-6 pb-20 h-full overflow-y-auto custom-scrollbar">
                <!-- 菜品卡片1 -->
                <div class="neumorphic-card rounded-2xl p-4 mb-4">
                    <div class="flex gap-4">
                        <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=100&h=100&fit=crop" alt="番茄炒蛋" class="w-24 h-24 rounded-xl object-cover">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-semibold text-gray-800">番茄炒蛋</h3>
                                <div class="flex gap-2">
                                    <i class="fas fa-edit text-blue-500 cursor-pointer"></i>
                                    <i class="fas fa-trash text-red-500 cursor-pointer"></i>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">少油少盐版本，营养丰富</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4 text-sm text-gray-500">
                                    <span class="flex items-center gap-1">
                                        <i class="fas fa-clock"></i> 15分钟
                                    </span>
                                    <span class="flex items-center gap-1">
                                        难度：<span class="star-rating">★★</span>
                                    </span>
                                </div>
                                <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded-full text-xs">家常菜</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 菜品卡片2 -->
                <div class="neumorphic-card rounded-2xl p-4 mb-4">
                    <div class="flex gap-4">
                        <img src="https://images.unsplash.com/photo-1516684669134-de6f7c473a2a?w=100&h=100&fit=crop" alt="红烧肉" class="w-24 h-24 rounded-xl object-cover">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-semibold text-gray-800">红烧肉</h3>
                                <div class="flex gap-2">
                                    <i class="fas fa-edit text-blue-500 cursor-pointer"></i>
                                    <i class="fas fa-trash text-red-500 cursor-pointer"></i>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">肥而不腻，入口即化</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4 text-sm text-gray-500">
                                    <span class="flex items-center gap-1">
                                        <i class="fas fa-clock"></i> 90分钟
                                    </span>
                                    <span class="flex items-center gap-1">
                                        难度：<span class="star-rating">★★★★</span>
                                    </span>
                                </div>
                                <span class="px-2 py-1 bg-purple-100 text-purple-600 rounded-full text-xs">家常菜</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 菜品卡片3 -->
                <div class="neumorphic-card rounded-2xl p-4 mb-4">
                    <div class="flex gap-4">
                        <img src="https://images.unsplash.com/photo-1547592180-85f173990554?w=100&h=100&fit=crop" alt="紫菜蛋花汤" class="w-24 h-24 rounded-xl object-cover">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-semibold text-gray-800">紫菜蛋花汤</h3>
                                <div class="flex gap-2">
                                    <i class="fas fa-edit text-blue-500 cursor-pointer"></i>
                                    <i class="fas fa-trash text-red-500 cursor-pointer"></i>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">清淡爽口，营养丰富</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4 text-sm text-gray-500">
                                    <span class="flex items-center gap-1">
                                        <i class="fas fa-clock"></i> 10分钟
                                    </span>
                                    <span class="flex items-center gap-1">
                                        难度：<span class="star-rating">★</span>
                                    </span>
                                </div>
                                <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-full text-xs">汤羹</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 菜品卡片4 -->
                <div class="neumorphic-card rounded-2xl p-4 mb-4">
                    <div class="flex gap-4">
                        <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=100&h=100&fit=crop" alt="意大利面" class="w-24 h-24 rounded-xl object-cover">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="text-lg font-semibold text-gray-800">意大利面</h3>
                                <div class="flex gap-2">
                                    <i class="fas fa-edit text-blue-500 cursor-pointer"></i>
                                    <i class="fas fa-trash text-red-500 cursor-pointer"></i>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">经典番茄肉酱口味</p>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4 text-sm text-gray-500">
                                    <span class="flex items-center gap-1">
                                        <i class="fas fa-clock"></i> 25分钟
                                    </span>
                                    <span class="flex items-center gap-1">
                                        难度：<span class="star-rating">★★★</span>
                                    </span>
                                </div>
                                <span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-xs">西餐</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 添加按钮 -->
            <div class="absolute bottom-24 right-6">
                <div class="w-16 h-16 neumorphic rounded-full flex items-center justify-center cursor-pointer" onclick="showAddDishModal()">
                    <i class="fas fa-plus text-2xl text-purple-600"></i>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="absolute bottom-0 left-0 right-0 neumorphic-inset rounded-t-3xl">
                <div class="flex justify-around py-4">
                    <div class="text-center">
                        <i class="fas fa-home text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">首页</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-search text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">搜索</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-plus-circle text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">添加</p>
                    </div>
                    <div class="text-center">
                        <i class="fas fa-user text-gray-400 text-xl"></i>
                        <p class="text-xs mt-1 text-gray-400">我的</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 添加菜品模态框 -->
    <div id="addDishModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-3xl p-6 w-80 mx-4">
            <h3 class="text-xl font-bold text-gray-800 mb-4">添加新菜品</h3>
            <div class="space-y-4">
                <div>
                    <label class="text-sm text-gray-600">菜品名称</label>
                    <input type="text" class="w-full neumorphic-inset rounded-xl px-4 py-2 mt-1" placeholder="请输入菜品名称">
                </div>
                <div>
                    <label class="text-sm text-gray-600">分类</label>
                    <select class="w-full neumorphic-inset rounded-xl px-4 py-2 mt-1">
                        <option>家常菜</option>
                        <option>汤羹</option>
                        <option>主食</option>
                        <option>西餐</option>
                    </select>
                </div>
                <div>
                    <label class="text-sm text-gray-600">简介</label>
                    <textarea class="w-full neumorphic-inset rounded-xl px-4 py-2 mt-1" rows="3" placeholder="请输入菜品简介"></textarea>
                </div>
                <div>
                    <label class="text-sm text-gray-600">烹饪时间</label>
                    <input type="text" class="w-full neumorphic-inset rounded-xl px-4 py-2 mt-1" placeholder="如：15分钟">
                </div>
                <div>
                    <label class="text-sm text-gray-600">难度星级</label>
                    <div class="flex gap-2 mt-1">
                        <i class="fas fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400"></i>
                        <i class="fas fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400"></i>
                        <i class="fas fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400"></i>
                        <i class="fas fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400"></i>
                        <i class="fas fa-star text-2xl text-gray-300 cursor-pointer hover:text-yellow-400"></i>
                    </div>
                </div>
            </div>
            <div class="flex gap-3 mt-6">
                <button class="flex-1 neumorphic-btn rounded-xl py-3 text-gray-600" onclick="hideAddDishModal()">取消</button>
                <button class="flex-1 neumorphic-btn rounded-xl py-3 bg-purple-600 text-white">确定</button>
            </div>
        </div>
    </div>
    
    <script>
        function showAddDishModal() {
            document.getElementById('addDishModal').style.display = 'flex';
        }
        
        function hideAddDishModal() {
            document.getElementById('addDishModal').style.display = 'none';
        }
    </script>
</body>
</html>